<template>
  <div class="meetingRoom">
    <Button type="primary" @click="addMeetRoom">添加会议室</Button>
    <div class="roomTable">
      <Table size="small" :columns="columns1" :data="roomData"></Table>
    </div>
    <!--添加会议室弹出框-->
    <Modal v-model="createMeet" :title="moadlTitle" :mask-closable="false" width="360px" class="modelStyle">
      <Row>
        <Col span="24">
        <Form :model="formInfo" label-position="left" :label-width="82" :rules="roomCheck" ref="roomForm">
          <Row>
            <FormItem label="会议室地址">
              <Input v-model="formInfo.address" style="width:220px"></Input>
            </FormItem>
            <FormItem label="会议室名称" prop="name">
              <Input v-model="formInfo.name" style="width:220px"></Input>
            </FormItem>
            <FormItem label="可容纳人数" prop="people">
              <Input v-model="formInfo.people" style="width:220px"></Input>
            </FormItem>
          </Row>
        </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="ghost" @click="cancelCreate">取消</Button>
        <Button type="primary" @click="createRoomYes">确认</Button>
      </div>
    </Modal>
    <!--删除会议室弹出框-->
    <Modal v-model="deleteModal" class-name="vertical-center-modal" width="300">
      <p>确定删除该会议室吗？</p>
      <div slot="footer">
        <Button type="ghost" @click="deleteModal = false">取消</Button>
        <Button type="primary" @click="deleteOk">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
  import './metting.css'
  let checkValue = false
  export default {
    data() {
      const dataValue = (value) => {
        this.roomData.forEach((item, index) => {
          if (value === item.name) {
            this.createMeet = true
            this.checkValue = true
            console.log('2222', this.checkValue)
            this.$Notice.warning({
              title: '警告',
              desc: '该会议室已存在！'
            })
          }
        })
      }
      const nameCheck = (role, value, callback) => {
        console.log(value)
        // const postRoleName = encodeURIComponent(this.post.name).trim()
        const chenkValue = /^[0-9a-zA-Z-_—\u4e00-\u9fa5]{0,2}$/
        if (value === '') {
          console.log('会议名称不能为空')
          callback(new Error('会议名称不能为空'))
          this.checkValue = false
        } else if (!chenkValue.test(value)) {
          callback(new Error('请输入汉字、数字、字母、-、——、_，并且长度不能超过32！'))
          this.checkValue = false
        } else {
          dataValue(value)
          if (this.checkValue) {
            callback(new Error('该会议室已存在！,请重新输入'))
            this.checkValue = false
          } else {
            callback()
            this.checkValue = false
          }
        }
      }
      const numCheck = (rule, value, callback) => {
        var r = /^([0-9][0-9]*)$/
        if (value === '') {
          return callback(new Error('不可以为空'))
        }
        if (r.test(value) && Number(value) >= 0) {
          var s = (value + '').substring(0, 1)
          if ((value.length > 1) && (Number(s) === 0)) {
            return callback(new Error('请输入有效数字'))
          } else {
            callback()
          }
        } else {
          return callback(new Error('请输入有效数字'))
        }
      }
      return {
        columns1: [
          {
            title: '会议室地址',
            key: 'address'
          },
          {
            title: '会议室名称',
            key: 'name'
          },
          {
            title: '可容纳人数',
            key: 'numPeople'
          },
          {
            title: '操作',
            key: 'operat',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: (e) => {
                      this.changeData(params.row)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: (e) => {
                      this.remove(params.row)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        roomData: [],
        createMeet: false,
        formInfo: {
          address: '',
          name: '',
          people: ''
        },
        deleteModal: false,
        dataIndex: '',
        roomId: '',
        sureChange: false,
        moadlTitle: '',
        roomCheck: {
          name: [
            { required: true, validator: nameCheck, trigger: 'change' }
          ],
          people: [
            { required: true, validator: numCheck, trigger: 'change' }
          ]
        }
      }
    },
    created() {
      this.getMeetList()
    },
    components: {
    },
    computed: {
      ...mapState({
        meetRoomData: ({ meetManage }) => meetManage.meetRoomData
      })
    },
    methods: {
      ...mapActions(['createMettRoom', 'deleteRoomData', 'changeMettRoom']),
      ...mapMutations(['GET_MEETROOMDATA']),
      // 获取会议室列表
      getMeetList() {
        this.createMettRoom().then(() => {
          console.log('this.createMettRoom', this.meetRoomData)
          this.roomData = JSON.parse(JSON.stringify(this.meetRoomData))
        }).catch(err => {
          console.log('getVideoAmountCount error: ' + err)
        })
      },
      // 添加会议室
      addMeetRoom() {
        this.createMeet = true
        this.moadlTitle = '添加会议室'
        if (this.formInfo) {
          this.formInfo.address = ''
          this.formInfo.name = ''
          this.formInfo.people = ''
        }
      },
      createRoomYes() {
        if (this.sureChange) {
          const change = {
            id: this.roomId,
            addr: this.formInfo.address,
            name: this.formInfo.name,
            peopleNum: Number(this.formInfo.people)
          }
          this.changeMettRoom(change).then(() => {
            this.createMeet = false
            this.sureChange = false
            this.getMeetList()
          }).catch(err => {
            console.log('getVideoAmountCount error: ' + err)
          })
        } else {
          this.$refs.roomForm.validate((valid) => {
            if (!valid) {
              this.createMeet = true
            } else {
              console.log('创建')
              const addDate = {
                addr: this.formInfo.address,
                name: this.formInfo.name,
                peopleNum: Number(this.formInfo.people)
              }
              this.createMettRoom(addDate).then(() => {
                this.createMeet = false
                this.getMeetList()
              }).catch(err => {
                console.log('getVideoAmountCount error: ' + err)
              })
            }
          })
        }
      },
      cancelCreate() {
        this.createMeet = false
        this.$refs['roomForm'].resetFields()
      },
      // 删除会议室
      remove(row) {
        this.deleteModal = true
        this.dataIndex = row._index
        this.roomId = row.roomId
      },
      deleteOk() {
        // })
        this.deleteRoomData({ id: this.roomId }).then(() => {
          this.roomData.splice(this.dataIndex, 1)
          this.deleteModal = false
        }).catch(err => {
          console.log('getVideoAmountCount error: ' + err)
        })
      },
      // 修改会议室
      changeData(row) {
        console.log('111', row)
        this.createMeet = true
        this.sureChange = true
        this.moadlTitle = '修改会议室'
        this.$refs['roomForm'].resetFields()
        if (this.formInfo) {
          this.roomId = row.roomId
          this.formInfo.address = row.address
          this.formInfo.name = row.name
          this.formInfo.people = row.numPeople
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  .meetingRoom {
    padding: 20px;
    .roomTable {
      margin-top: 20px;
    }
  }
</style>